<template>
  <div class="word_detail_wrapper">
    <div class="word_detail_inner">

      <el-dialog title="单词详情" :visible.sync="dialogFormVisible" style="">
        <el-form >
          <el-form-item label="单词" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="word.src" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="翻译" :label-width="formLabelWidth">
            <el-input v-model="word.tgt" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
        <div class="imp_cmd_wrapper">
          <div class="imp_cmd_inner" style="display: flex;flex-direction: row-reverse;">
            <el-select v-model="word.imp" filterable placeholder="重要度">
              <el-option v-for="item in imps" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <el-select v-model="word.cmd" filterable placeholder="熟练度" style="">
              <el-option v-for="item in cmds" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
          <div class="feature_wrapper" style="display: flex;flex-direction: row-reverse;margin-top: 20px;">
            <el-select v-model="word.feature_strs" :value-key="word.id" v-on:change="featureChange" @remove-tag = "removeTag" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
              <el-option v-for="item in sys_features"  :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
          <div class="add_feature_wrapper">
            <div class="add_feature_inner" style="display: flex;padding-left: 73px;
            flex-direction: row-reverse;margin-top: 20px;">
              <el-input placeholder="请输入内容" v-model="feature_input" clearable style="margin-right: 0px;"></el-input>
              <div style="padding-right: 10px;">
                <el-button type="primary" icon="el-icon-edit" circle @click="addFeature"></el-button>
              </div>
            </div>
          </div>

        </div>
        <div class="update_word_wrapper" style="border: 0px solid red;display: flex;flex-direction: row-reverse;margin-top: 20px;" >
          <el-button type="primary" icon=""  @click="updateWord" style="width: 81%;">修改单词</el-button>
        </div>

      </el-dialog>



    </div>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex';
  import {postRequest} from "../utils/api";

  export default {
      computed:{
        ...mapState(['sys_features']),
        ...mapGetters({asd:'inc_inc'})
      },
      props: ['dialogFormVisible', 'word'],
      name: "WordDetail",
      data(){
        return {
          feature_input: '',
          imps: ['保留','很重要','重要','不重要'],
          cmds: ['保留','很熟练','熟练','不熟练'],
          formLabelWidth: '120px',
          imageUrl:'',
          is_add_feature: 0,
          word_change: 1
        }
      },
      methods: {
        featureChange(){
          this.$message({showClose: true, message: "featureChange:"+tag, type: 'success'})
        },
        updateWord(){
          var word = this.word
          let param = {
            src: word.src, tgt: word.tgt, cmd: word.cmd, imp: word.imp, id: word.id
          }
          postRequest('word_consumer/update_word', param).then(res=>{
            this.$message({showClose: true, message: JSON.stringify(res), type: 'success'})
          }).catch(err=>{
            this.$message({showClose: true, message: JSON.stringify(err), type: 'error'})
          })
        },
        addFeature(){
          if (this.feature_input == ''){
            return
          }
          this.word.feature_strs.push(this.feature_input)
          this.feature_input = ''
          this.is_add_feature++
          // this.$message({showClose: true, message: "添加的特征:"+tag, type: 'success'})
        },
        removeTag(tag){
          // this.$message({showClose: true, message: "减少的特征:"+tag, type: 'success'})
          let param = {descript: tag, wordid: this.word.id}
          postRequest('feature_consumer/del_feature', param).then(res=>{
            this.$message({showClose: true, message: JSON.stringify(res.data.t), type: 'success'})
          }).catch(err=>{
            this.$message({showClose: true, message: JSON.stringify(err), type: 'error'})
          })
        }
      },
      watch: {
        word(newv, oldv){
          // this.$message({showClose: true, message: "word change", type: 'success'})
          this.word_change = 1
          if (newv.feature_strs.length <= oldv.feature_strs.length){
            this.word_change = 0
            // this.$message({showClose: true, message: "his is new word and word_change = 0 now", type: 'success'})
          }
        },
        'word.feature_strs'(newv, oldv){
          // this.$message({showClose: true, message: "watch feature_strs", type: 'success'})
          if ((newv.length > oldv.length)&&(this.word_change == 1)){
            this.word_change = 0
            this.$message({showClose: true, message: "not addFeature because this is new word", type: 'success'})
            return
          }
          if (newv.length > oldv.length){
            this.is_add_feature++
            // this.$message({showClose: true, message: "addFeature", type: 'success'})
          }
          // this.$message({showClose: true, message: "newv:"+JSON.stringify(newv)+"  oldv:"+JSON.stringify(oldv), type: 'success'})
        },
        dialogFormVisible(newv,oldv){
          this.$emit("showDialog", newv)
        },
        is_add_feature(newv, oldv){
          console.debug("is_add_feature -->"+"newv:"+newv+"   oldv:"+oldv)
          // this.$message({showClose: true, message: "addFeature", type: 'success'})
          var new_feature = this.word.feature_strs[this.word.feature_strs.length-1]
          let param = {descript: new_feature, wordid: this.word.id}
          postRequest('feature_consumer/add_feature', param).then(res=>{
            this.$message({showClose: true, message: "add new feature result:"+JSON.stringify(res.data.t), type: 'success'})
          }).catch(err=>{
            this.$message({showClose: true, message: "add new feature fail", type: 'error'})
          })
        }
      }
    }
</script>

<style scoped>
  .imp_cmd_inner .el-select{
    margin-left: 20px;
  }
  .feature_wrapper .el-select{
    width: 520px;
  }
</style>
